<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>条件判断案例</title>
  </head>

  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <form action="">
        <div v-if="isShow">
          <label for="userName">用户名：</label>
          <input type="text" name="userName" id="userName" placeholder="用户名" key="userName">
        </div>
        <div v-else>
          <label for="email">用户邮箱：</label>
          <input type="text" name="email" id="email" placeholder="邮箱" key="email">
        </div>
        <button v-on:click.prevent="change()">切换</button>
      </form>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "你好，世界",
          isShow: true,
        },
        computed: {
          // changeStatus() {
          //     console.log(!this.isShow);
          //     return !this.isShow;
          // }
        },
        methods: {
          change() {
            return this.isShow = !this.isShow;
          }
        }
      })
    </script>
  </body>

</html>